.course-card {
  position: relative;
  width: 630rpx;
  height: 200rpx;
  margin: 25rpx 60rpx;
  border-radius: 10rpx;
  box-shadow: 6rpx 6rpx 20rpx gray;
  color: rgb(64, 102, 85);

  &-title {
    position: absolute;
    left: 20rpx;
    top: 20rpx;
    font-weight: bolder;
    font-size: large;
  }

  &-teacher {
    position: absolute;
    right: 220rpx;
    top: 22rpx;
  }

  &-date {
    position: absolute;
    left: 20rpx;
    top: 80rpx;
  }

  &-weekday {
    position: absolute;
    left: 20rpx;
    top: 140rpx;
  }

  &-duration {
    position: absolute;
    left: 190rpx;
    top: 140rpx;
  }

  &-action {
    position: absolute;
    right: 40rpx;
    top: 50%;
    transform: translate(0, -50%);
    display: inline;

    &-tips {
      font-weight: bolder;
      padding: 20rpx 0;

      &-1 {
        font-weight: bolder;
        padding: 10rpx 0;
        color: greenyellow;
        font-size: larger;
      }

      &-2 {
        font-weight: bolder;
        padding: 10rpx 0;
        color: red;
        font-size: larger;
      }

      &-7 {
        font-weight: bolder;
        padding: 10rpx 0;
        color: blueviolet;
        font-size: larger;
      }

      &-3 {
        font-weight: bolder;
        color: green;
        font-size: smaller;
      }

      &-4 {
        font-weight: bolder;
        color: red;
        font-size: smaller;
      }

      &-5 {
        font-weight: bolder;
        color: blue;
        font-size: smaller;
      }

      &-6 {
        font-weight: bolder;
        font-size: smaller;
      }
    }
  }
}